<template>
  <div class="generatePPT" v-loading = "loading" :element-loading-text="loadingContent" element-loading-background="rgba(0, 0, 0, 0.8)" element-loading-spinner="el-icon-loading">
    <header class="header">
      <span @click="emit('back')">返回</span>
      <span>博客生成</span>
      <el-button style="margin-left: auto;" type="primary" @click = "downloadPPT">下载</el-button>
    </header>
    <el-card>
      <p class="content" v-html="list"></p>
      <div class="images">
        <img v-for="item in images" :src="item" alt="">
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { onMounted,ref } from 'vue'
import {textPolish} from '@/api/index'
const loading = ref(false)
const downPPtLoading = ref(false)
const list = ref({})
const activeInput = ref('')

const images = ref([])
const emit = defineEmits(['back'])
const loadingContent = ref("")
const prop = defineProps({
  search: {
    type: String,
  },
  filePaths: {
    type: String,
  }
})
onMounted(() => {
  initBlog()
})

const initBlog = async () => {
  if (!prop.search) return
  try {
    loadingContent.value = "生成中..."
    loading.value = true
    var fileList = []
    if (prop.filePaths != undefined && prop.filePaths != '') {
      fileList = prop.filePaths.split(",")
    }
    const { data, code } = await textPolish({
      text: prop.search,
      filePaths :fileList,
    })
    if (code === 200) {
      list.value = data.text.replace(/\n/g, "<br/>");
      if(data.images.length > 0) {
        data.images.forEach((item) => {
          images.value.push("data:image/png;base64," + item)
        })
      }
    }
    console.log(list.value)
    loading.value = false
  } catch (error) {
  }
}
</script>

<style lang="scss" scoped>
.generatePPT {
  width: 100%;
  height: 100%;
  padding: 30px 66px;

  .header {
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;

    span {
      font-weight: 600;
      margin-right: 8px;

      &:nth-child(1) {
        text-align: end;
        width: 58px;
        height: 20px;
        cursor: pointer;
        background: url('@/assets/image/左箭头.svg') no-repeat left;
      }
    }

    .el-button {
      width: 80px;
      height: 32px;
      border-radius: 6px;
    }
  }


  .el-card {
    overflow-y:auto;
    height: 90%;
    margin-top: 30px;
    .content {
      width: 100%;
      border-radius: 6px;
      background: #F6F6F6;
      padding-top: 8px;
      padding-bottom: 8px;
      margin-top: 8px;

      .h1 {
        color: #191919;
        font-size: 14px;
        font-weight: 600;
        width: 100%;
        padding: 0 8px 0 28px;
      }

      .page {
        color: #191919;
        font-family: "Microsoft YaHei";
        font-size: 14px;
        font-weight: 600;
        margin: 16px 0;

        .h2 {
          padding: 0 8px 0 28px;
        }

        .h2-input {
          display: flex;
          align-items: center;
          flex-wrap: wrap;

          :deep(.van-field) {
            align-items: center;
            padding: 0;
            background-color: transparent;
            border-radius: 4px;
            border: 1px solid var(--van-primary-color);
            background: #E0E9FF;
            height: 40px;

            .van-field__label {
              width: 20px;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }


        }

        ul {
          list-style: disc;
          padding-left: 45px;
          color: #191919;
          font-size: 14px;
          font-weight: 400;
          margin-top: 8px;
          width: 100%;

          li {
            width: 100%;
            margin: 16px 0;
            padding-right: 10px;
          }
        }
      }
      .images {
        display: flex;
        justify-content: start;
        align-items: center;
        flex-wrap: wrap;

        img {
          width: 100px;
          height: 100px;
          margin: 1px;
        }
      }
    }
  }
}
</style>
